<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">
      <el-form-item label="文章Id" class="flex-50" prop="title" v-show="false">
        <el-input v-model="dataInfo.contentId" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="选择文章" class="flex-50" prop="title" style="width: 80%">
        <el-input v-model="dataInfo.title" class="cms-width"></el-input>
        <el-button type="primary" @click="goShowContentDialog()">选择</el-button>
      </el-form-item>

      <el-form-item label="Android设备" class="flex-100" prop="androidStatus">
        <el-radio-group v-model="dataInfo.androidStatus">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="IOS设备" class="flex-100" prop="iosStatus">
        <el-radio-group v-model="dataInfo.iosStatus">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="推送类型" class="flex-50" prop="pushType">
        <el-radio-group v-model="dataInfo.pushType">
          <el-radio :label="0">立即</el-radio>
          <el-radio :label="1">定时</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="设置推送日期" class="flex-50" prop="taskTime" v-if="dataInfo.pushType==1">
        <el-date-picker v-model="dataInfo.taskTime" type="datetime" placeholder="推送时间" class="cms-width"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>


    </el-form>
    <div class="form-footer">
      <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/pushTask/save'">添加
      </el-button>
      <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/pushTask/update'">修改
      </el-button>
    </div>

    <el-dialog :visible.sync="showContentDialog" v-if="showContentDialog" title="选择文章" width="60%">
      <div class="cms-list-header clearfix flex" style="padding:0 24px 16px 24px;flex-wrap:wrap">
        <div style="margin-top:16px;flex:auto">
          <el-select @change="goQuery()" v-model="params.channelId" clearable placeholder="请选择">
            <el-option v-for="item in channelList" :key="item.channelId" :label="item.channelName"
                       :value="item.channelId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <cms-input label="标题" v-model="params.title"></cms-input>
          <el-button @click="query">查询</el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe @selection-change="checkIds" v-loading="loading">
        <el-table-column prop="id" label="id" width="50" align="left"></el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="200px">
          <div slot-scope="scope">
            <span class="cms-channel-name">[{{scope.row.channelName}}]</span>
            {{scope.row.title}}
          </div>
        </el-table-column>
        <el-table-column label="编辑" prop="userName" align="center"></el-table-column>
        <el-table-column label="发布时间" prop="releaseDate" align="center"></el-table-column>
        <el-table-column label="成功次数" prop="pushNum" align="center">
          <div slot-scope="scope">
            <span v-if="scope.row.pushNum==''">0</span>
            <span v-else>{{scope.row.pushNum}}</span>
          </div>
        </el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center">
          <div slot-scope="scope">
            <el-button type="primary" @click="goSelect(scope.row.id,scope.row.title)">选择</el-button>
          </div>
        </el-table-column>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <cms-pagination :total="total" @change="getPages"></cms-pagination>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";
  import listMixins from '@/mixins/list'

  export default {
    mixins: [formMixns, listMixins],
    data() {
      let required = va.required();
      return {
        rules: {//校验规则
          title: [required],
          taskTime: [required],
        },
        dataInfo: {
          taskTime:'',
          androidStatus: 1,
          iosStatus: 1,
          pushType: 0,
          title: ''
        },
        channelList: [],
        params: {
          status: '2',
          orderBy: '2',
        },
        showContentDialog: false
      };
    },
    methods: {
      getDataInfo(id, type) {
        if (type == 'update') {
          let api = this.$api; //API地址
          axios.all([
            axios.post(api.pushTaskGet, {pushId: id}),
          ]).then(axios.spread((res) => {
            this.loading = false;
            this.$refs["form"].resetFields();
            this.dataInfo = res.body; //将用户数据复制给dataInfo
          })).catch(error => {
            this.loading = false;
          });
        }
        this.loading = false;
      },
      add(state) {
        this.saveDataInfo(state, this.$api.pushTaskSave, this.dataInfo, "pageList");
      },
      update() {
        this.updateDataInfo(this.$api.pushTaskUpdate, this.dataInfo, "pageList");
      },
      goShowContentDialog() {
        this.showContentDialog = true;
        this.getChannelList();
        this.initTableData(this.$api.viewNewsPageList, this.params) //请求列表
      },
      getChannelList() {
        axios.post(this.$api.getOneLevelChannelList, {}).then(res => {
          if (res.code == '200') {
            this.channelList = res.body;
          }
        })
      },
      goSelect(id, title) {
        this.dataInfo.contentId = id;
        this.dataInfo.title = '【' + id + '】' + title;
        this.showContentDialog = false;
      }
    },
    created() {
      //初始获取数据
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
  .dialog .tree-layout {
    min-height: 400px;
    width: 90%;
  }

  .dialog .tree-layout .tree {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    border-right: 0px solid #d4dde2;
  }

  .el-dialog__body {
    min-height: 450px;
    overflow: auto;
  }

  .red-color {
    color: red;
  }
  @media screen and (max-width: 1366px) and (min-width: 1201px) {
    .flex-50 .cms-width {
      width: 82%;
    }
  }
</style>
